<template>
  <div class="course ele-modify-tab">
    <el-row>
      <el-col :span="6">
        <div class="course-title">
          <div class="titleText">
            <p>{{courseSet.directionname}}</p>
            <span class="titleUnderLine"></span>
          </div>
          <img :src="courseSet.url" @click="checkDirectionC(CityId,courseSet.direction,'')"/>
        </div>
      </el-col>
      <el-col :span="18">
        <div class="course-content">
          <el-tabs v-model="activeName">
            <el-tab-pane v-for="(item, index) in courseSet.typesList" :key="index" :label="item.typename" :data-typeid="item.type">
              <div class="course-content-title">
                <p class="cateory-text">
                  <i class="title-icon">
                    <img :src="titleIcon" alt="" srcset="">
                  </i>
                精选套餐</p>
                <p class="more" @click="checkMore(CityId,courseSet.direction,item.type)" id="ckmore" onclick="_hmt.push(['_trackEvent', 'querymore', 'click', 'ckmore'])">更多 ></p>
              </div>
              <div class="list-content">
                <div class="course-item" id="coursepic" onclick="_hmt.push(['_trackEvent', 'coursepicture', 'click', 'coursepic'])" v-for="(course, index) in item.packsList" :key="index" @click="checkDetail(course.pack_id,courseSet.directionname,item.typename)">
                  <img :src="course.url">
                  <p>{{course.name}}</p>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  components: {},
  name: 'homeCourse',
  data() {
    return {
      activeName: '0',
      typeId: '0',
      cityId: '1',
      titleIcon: './static/course-sub-title.png'
    }
  },
  computed: {
    CityId() {
      return this.$store.state.cityId
    }
  },
  methods: {
    checkDetail(id, directionName, typeName) {
      this.$router.push({
        path: '/courseDetail',
        query: {
          detailId: id,
          from: 1,
          direc: directionName,
          type: typeName
        }
      })
    },
    // 更多（查看该方向该类型下的课程列表）
    checkMore(cityId, direction, type) {
      this.$router.push({
        path: '/categoryCourse',
        query: {
          direction: direction,
          type: type,
          cityId: cityId
        }
      })
    },
    // 点击大图片（查看该方向下的课程列表）
    checkDirectionC(cityId, direction, type) {
      this.$router.push({
        path: '/directionCourse',
        query: {
          direction: direction,
          type: type,
          cityId: cityId
        }
      })
    }
  },
  props: {
    courseSet: Object,
  }
};

</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~style/base.styl';

.course {
  @extend .borderBox;
  height: 640px;
  margin-top: 48px;
  background-color: $color-text;

  .course-title {
    .titleText {
      padding: 28px 0;

      p {
        @extend .clear-default;
        height: 24px;
        line-height: 24px;
        font-size: $font-size-large-xxxxl;
        color: $color-course-title;
        font-weight: bold;
      }

      .titleUnderLine {
        display: block;
        width: 44px;
        height: 6px;
        border-radius: 3px;
        margin-top: 12px;
        background-color: $color-theme;
      }
    }

    img {
      width: 312px;
      height: 550px;
      cursor: pointer;

      &:hover {
        box-shadow:0px 26px 50px rgba(0,0,0,0.24);
      }
    }
  }

  .course-content {
    @extend .borderBox;

    .el-tabs__header {
      margin-top: 48px;
    }

    .course-content-title {
      @extend .borderBox;
      height: 66px;
      margin-top: 48px;
      padding-right: 19px;

      i {
        width: $font-size-large-xl;
        height: $font-size-medium;
      }

      p {
        @extend .clear-default;
        display: inline-table;
      }

      .cateory-text {
        text-align: left;
        font-size: $font-size-large-xxl;
        color: $color-course-title;
        font-weight: bold;

        .title-icon {
          // background-image: url('./static/course-sub-title.png');
        }

        .icon-jingxuan {
          font-size: $font-size-medium-x;
        }
      }

      .more {
        float: right;
        font-size: $font-size-medium;
        color: $color-text-mt;
        line-height: 26px;

        &:hover {
          text-decoration: underline;
          color: $color-sub-pay;
          cursor: pointer;
        }
      }
    }

    .list-content {
      .course-item {
        text-align: center;
        cursor: pointer;
        width: 266px;
        height: 224px;
        display: inline-table;
        margin-right: 20px;
        margin-bottom: 30px;

        &:hover img {
          box-shadow:0px 26px 50px rgba(0,0,0,0.24);
        }

        img {
          width: 100%;
          height: 172px;
        }

        p {
          @extend .clear-default;
          ellipsis(2);
          line-height: 23px;
          text-align: left;
          font-size: $font-size-medium;
          color: #202020;
          font-weight: bold;
          margin-top: 5px;
        }
      }
    }
  }
}
.course /deep/ .el-tabs__item:focus.is-active.is-focus:not(:active)
{
  -webkit-box-shadow:0 0 2px 2px #fff inset;
  box-shadow:0 0 2px 2px #fff inset;
}
</style>
